<template>
  <div class="home_event">
    <div class="card_list_box" v-if="swiperList.length > 0">
        <ul class="card_title">
          <li class="title_left">
            <ImgT src="/imgs/home/saishi.webp" alt="" />
            <span>{{ t('home_page_event') }}</span>
          </li>
          <li class="title_right">
            <p class="more" @click="goToMore">
              {{ t('home_page_more') }}
            </p>
            <div class="swiper-btn swiper_pre2" :class="{ disabled: isEventBeginning || swiperList.length === 0 }"
              @click="otherHandlePrev(eventRef, 'event')">
              <iconpark-icon name="zuo-keyong" size="24" />
            </div>
            <div class="swiper-btn swiper_next2" :class="{ disabled: isEventEnd || swiperList.length === 0 }"
              @click="otherHandleNext(eventRef, 'event')">
              <iconpark-icon name="you-keyong" size="24" />

            </div>
          </li>
        </ul>
        <div class="swiperBox event_box">
          <swiper direction="horizontal" :modules="modules" :navigation="{
            prevEl: '.swiper_pre2',
            nextEl: 'swiper_next2'
          }" @swiper="(e: any) => { eventRef = e; updateSwiperStatus('event'); }"
            @slideChange="updateSwiperStatus('event')" :autoplay="false" :loop="false" :delay="3000"
            :disableOnIntercation="false" slidesPerView="auto" :spaceBetween="5 - 5" :centeredSlides="true">
            <swiper-slide v-for="(item, key) in swiperList" :key="key">
              <div class="events_swiper">
                <imgT w-full h-full :src="`${settings.backend_upload}${item.tournm_logo}`" fit="cover" />
                <ul class="event_box_btn">
                  <li class="time_box">
                    <iconpark-icon name="time" size="18" />
                    <span>
                      {{ t("home_page_event_date", {
                        year: item.begin_time.year,
                        month: item.begin_time.month,
                        day: item.begin_time.day,
                        hour: item.begin_time.hour,
                      }) }}
                    </span>
                  </li>
                  <li class="join_box" @click="goToMore">{{ t('home_page_sign_up') }}</li>
                </ul>
              </div>

            </swiper-slide>
          </swiper>

        </div>
      </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, nextTick, watch, onBeforeMount, onUnmounted } from 'vue';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { NetPacket } from '@/netBase/NetPacket';
import { i18n } from '@/languages';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import { showToast } from "@nutui/nutui";
import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/pagination'

import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';

import { Page } from '@/store/page';
const { t } = useI18n();
const {
  lang,
  settings,
} = storeToRefs(Page(pinia));


const eventRef = ref() // 赛事
const swiperList: any = ref([]);
const isEventBeginning = ref(true)
const isEventEnd = ref(false)

const otherHandlePrev = (item: any, type: string) => {
  if (type === 'event' && !isEventBeginning.value && swiperList.value.length > 0) {
    item.slidePrev();
    updateSwiperStatus(type);
  }
}
const otherHandleNext = (item: any, type: string) => {
  if (type === 'event' && !isEventEnd.value && swiperList.value.length > 0) {
    item.slideNext();
    updateSwiperStatus(type);
  }
}
const updateSwiperStatus = (type: string) => {
  nextTick(() => {
    const swiper = type === 'event' ? eventRef.value : '';
    if (swiper) {
      if (type === 'event') {
        isEventBeginning.value = swiper.isBeginning;
        isEventEnd.value = swiper.isEnd;
      }
    }
  });
};

const goToMore = () => {
  showToast.text(t("not_open"))
}


watch(swiperList, () => {
  if (eventRef.value) {
    updateSwiperStatus('event');
  }
});

const modules = [Autoplay, Pagination];

const handleEventsList = async (res: any) => {
  swiperList.value = res.tournm_list;
};

onBeforeMount(() => {
  i18n.global.locale.value = lang.value

  //获取赛事列表
  const eventsList = NetPacket.req_tournament_events_list();
  eventsList.game_type = 0
  eventsList.page = 6

  H5Websocket.sendMessageHandler(eventsList);
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_tournament_events_list,
    handleEventsList
  );
})

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_tournament_events_list, null);
})
</script>

<style lang="scss" scoped>
.home_event {
  .card_list_box {
    padding-left: 14px;

    .card_title {
        display: flex;
        padding: 0 14px;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        line-height: 24px;
        margin: 12px 0;

        .title_left {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          text-align: left;
          color: #FCFFFA;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }

        .title_right {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 12px;
          text-align: left;
          color: #C6C4F5;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .more {
            background: #282747;
            margin-left: 8px;
            padding: 8px;
            border-radius: 5px;
            box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
          }

          .swiper-btn {
            margin-left: 8px;
          }

          .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
    }

    // .winning_list {
    //   display: flex;
    //   justify-content: flex-start;
    //   flex-wrap: wrap;

    //   .winning_list_ul {
    //     display: flex;
    //     // margin: 0 14px;
    //     margin-bottom: 10px;

    //     .winning_list_li {
    //       width: 62.5px;
    //       height: 96px;
    //       margin-right: 8px;
    //       border-radius: 8px;
    //       background: #131232;
    //       box-sizing: border-box;
    //       padding: 8px;
    //       box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    //       display: flex;
    //       flex-direction: column;
    //       justify-content: space-around;
    //       align-items: center;

    //       img {
    //         width: 46px;
    //         height: auto;
    //         border-radius: 8px;
    //       }

    //       .money {
    //         font-family: SF Pro Display;
    //         font-size: 10px;
    //         font-weight: 700;
    //         line-height: 10px;
    //         text-align: left;
    //       }

    //       .name {
    //         width: 100%;
    //         font-family: PingFang SC;
    //         font-size: 10px;
    //         font-weight: 500;
    //         line-height: 10px;
    //         text-align: left;
    //         overflow: hidden;
    //       }
    //     }
    //   }
    // }

    // .masking_layer {
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;
    //   backdrop-filter: blur(1px);
    //   background: rgba(0, 0, 0, 0.6);
    //   font-family: PingFang SC;
    //   font-size: 12px;
    //   font-weight: 500;
    //   line-height: 18px;
    //   color: #ffffff;

    //   .maskin_img {
    //     width: 32px;
    //     height: 32px;
    //     margin-bottom: 8px;
    //   }
    // }
  }

  // 赛事轮播图
  .event_box {
    // height: 280px;

    .swiper-slide {
      box-sizing: border-box;
      height: 300px;
      background: linear-gradient(180deg, #0D0523 51.91%, #2B155D 100%);
    }

    .event_box_btn {
      height: 100%;
      padding: 0 14px;
      border-radius: 8px;
      margin-top: 23.19px;

      li {

        height: 44px;
        color: #FFFFFF;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 8px;
        // position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .time_box {
        background: #3A2960;
        margin-bottom: 12px;
      }

      .join_box {
        background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
        bottom: 18px;

      }

    }
  }

  .events_swiper {

    .events_box {
      >img {
        width: 331px;
        height: 148px;
        border-radius: 8px;
      }
    }
  }
}



</style>
